<template>
  <div class="dashboard-container">
    <div>
      导出文件：
      <el-date-picker
        v-model="from"
        type="date"
        value-format="timestamp"
        placeholder="选择开始日期">
      </el-date-picker> ～
      <el-date-picker
        v-model="to"
        type="date"
        value-format="timestamp"
        placeholder="选择结束日期">
      </el-date-picker>
      <el-select v-model="exportValue" placeholder="请选择..." @change="exportExcel">
        <el-option
          v-for="item in this.exportOption"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <br>
    <div class="dashboard-instruction">* 导出说明</div>
    <div class="dashboard-instruction"> 导出问题、导出反馈需要填写开始和结束日期，其他的导出不用填写日期。</div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { switchQuestionOnOff, switchFeedbackOnOff, getOnOffStatus } from '@/api/common'
  import { convertImageUrl, _hostUrl } from '@/utils/aws1903'

  export default {
    name: 'Dashboard',
    data() {
      return {
        questionOnOff: false,
        feedbackOnOff: false,
        slctCategory: '',
        category: null,
        exportOption: [{
          value: 1,
          label: '导出问题'
        }, {
          value: 2,
          label: '导出反馈'
        }, {
          value: 3,
          label: '导出证书'
        }, {
          value: 4,
          label: '导出邀请'
        }],
        exportValue: '',
        from: '',
        to: ''
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ])
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        this.listLoading = true
        getOnOffStatus().then(response => {
          this.questionOnOff = response.data.question
          this.feedbackOnOff = response.data.feedback
          this.category = response.data.category
          var slctCategory = response.data.slctCategory
          if (slctCategory == 0) {
            this.slctCategory = ''
          } else {
            this.slctCategory = slctCategory
          }
          this.listLoading = false
        })
      },
      switchQuestion() {
        this.listLoading = true
        switchQuestionOnOff().then(response => {
          this.questionOnOff = response.data.question
          this.listLoading = false
        })
      },
      switchFeedback() {
        this.listLoading = true
        if (this.feedbackOnOff && this.slctCategory == '') {
          this.$message.error('请选择会场')
          this.feedbackOnOff = false
          return
        }

        switchFeedbackOnOff(this.slctCategory).then(response => {
          this.feedbackOnOff = response.data.feedback
          if (!this.feedbackOnOff) {
            this.slctCategory = ''
          }
          this.listLoading = false
        })
      },
      exportExcel() {
        this.listLoading = true
        switch (this.exportValue) {
          case 1:
            if (this.from == null || this.from == '') {
              this.$message.error('请选择开始日期');
              this.exportValue = ''
              return
            }
            if (this.to == null || this.to == '') {
              this.$message.error('请选择结束日期');
              this.exportValue = ''
              return
            }
            this.downloadFile('/bs/exportQuestionz' + '?from=' + (this.from) + '&to=' + (this.to), 'question.xls')
            this.listLoading = false
            break
          case 2:
            if (this.from == null || this.from == '') {
              this.$message.error('请选择开始日期');
              this.exportValue = ''
              return
            }
            if (this.to == null || this.to == '') {
              this.$message.error('请选择结束日期');
              this.exportValue = ''
              return
            }
            this.downloadFile('/bs/exportFeedback' + '?from=' + (this.from) + '&to=' + (this.to), 'feedback.xls')
            this.listLoading = false
            break
          case 3:
            this.downloadFile('/bs/exportCertificatez', 'certificate.xls')
            this.listLoading = false
            break
          case 4:
            this.downloadFile('/bs/exportInvitation', 'invitation.xls')
            this.listLoading = false
            break
        }
      },
      downloadFile(url, fileName) {
        var xhr = new XMLHttpRequest()
        xhr.open('get', _hostUrl + url, true)
        xhr.responseType = 'blob'
        xhr.onload = function() {
          if (this.status == 200) {
            var blob = this.response
            var alink = document.createElement('a')
            alink.download = fileName
            alink.style.display = 'none'
            alink.href = URL.createObjectURL(blob)
            document.body.appendChild(alink)
            alink.click()
            URL.revokeObjectURL(alink.href)
            document.body.removeChild(alink)
          }
        }
        xhr.send()
      }
    }

  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 25px;
      line-height: 40px;
    }
    &-instruction {
      font-size: 15px;
      font-style: italic;
      line-height: 25px;
      color: #99a9bf;
    }
  }
</style>
